<template>
	<n-form ref="form2Ref" class="mt-4" :label-width="90" :model="formValue" :rules="rules" label-placement="left">
		<n-form-item label="付款账户" path="myAccount">
			<span>NaiveUiAdmin@163.com</span>
		</n-form-item>
		<n-form-item label="收款账户" path="account">
			<span>NaiveUiAdmin@qq.com</span>
		</n-form-item>
		<n-form-item label="收款人姓名" path="name">
			<span>Ah jung</span>
		</n-form-item>
		<n-form-item label="转账金额" path="money">
			<span>￥1980</span>
		</n-form-item>
		<n-form-item label="支付密码" path="password">
			<n-input type="password" v-model:value="formValue.password" />
		</n-form-item>
		<div style="margin-left: 80px">
			<n-space>
				<n-button @click="prevStep">上一步</n-button>
				<n-button type="primary" :loading="loading" @click="formSubmit">提交</n-button>
			</n-space>
		</div>
	</n-form>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue';
import { useMessage } from 'naive-ui';
const form2Ref: any = ref(null);
const message = useMessage();
const loading = ref(false);

const formValue = ref({
	password: '086611',
});

const rules = {
	password: {
		required: true,
		message: '请输入支付密码',
		trigger: 'blur',
	},
};

const emit = defineEmits(['prevStep', 'nextStep']);

function prevStep() {
	emit('prevStep');
}

function formSubmit() {
	loading.value = true;
	form2Ref.value.validate((errors: any) => {
		if (!errors) {
			setTimeout(() => {
				loading.value = false;
				emit('nextStep');
			}, 1500);
		} else {
			message.error('验证失败，请填写完整信息');
			loading.value = false;
		}
	});
}
</script>
